@extends('layouts.app')

@section('title', '身份证认证')

@section('css-import')

<!-- <link rel="stylesheet" type="text/css" href="{{config('app.inlet_src')}}/assets/css/htmleaf-demo.css"> -->
<link rel="stylesheet" href="{{config('app.inlet_src')}}assets/css/baguetteBox.min.css">
<!-- <link rel="stylesheet" href="{{config('app.inlet_src')}}/assets/css/gallery-grid.css"> -->
<style type="text/css">
	.identitycardimg_sty{
		width:800px;
		display:block;
	}
</style>
@endsection

@section('content-fluid')
<div class="tz-gallery">
	<div class="row">
	    <div class="col-sm-6 col-md-offset-3">
	        <img src="{{config('app.inlet_src')}}t.jpg" class="img-responsive identitycardimg" alt="Responsive image">
	    </div>
	    <div class="col-sm-6 col-md-offset-5">
	        <img src="{{config('app.inlet_src')}}t.jpg" class="img-responsive identitycardimg" alt="Responsive image">
	    </div>
	</div>
</div>
<div class="modal fade" tabindex="-1" id="exampleModal" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">身份证大图</h4>
      </div>
      <div class="modal-body">
        <img src="{{config('app.inlet_src')}}t.jpg" class="identitycardimg identitycardimg_sty center-block">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@section('js-import')
<script type="text/javascript" src="{{config('app.inlet_src')}}assets/scripts/baguetteBox.min.js"></script>
@endsection

@section('js-write')
<script type="text/javascript">
	baguetteBox.run('.tz-gallery');
	$('.identitycardimg').click(function(){
		var this_ = $(this).clone();
		$('#exampleModal').modal();
		$('#exampleModal').on('show.bs.modal', function (event) {
		  var button = $(event.relatedTarget); // Button that triggered the modal
		  var recipient = button.data('whatever'); // Extract info from data-* attributes
		  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
		  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
		  var modal = $(this);
		  modal.find('.modal-body').attr('src',this_.context.currentSrc);
		});
	});
	
</script>
@endsection